<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自动生成v提高版本</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    /*body{background: #000}*/
    #box{width: 250px;height: 250px;background: #666;margin: 200px auto;position: relative;}
    #In{position: relative;left: 500px;top: 180px;}
    div{width: 50px;height: 50px;background: #ff0000;position: absolute;left: 0;top: 0;color: #fff;font-size: 32px;line-height: 50px;text-align: center;}
  </style>
  <script type="text/javascript">
   window.onload = function(){
     var In = document.getElementById('In');
     var Box = document.getElementById('box');
     var Div = Box.getElementsByTagName('div');
     var num = 0;
     var Str = "";
     In.onclick = function (){
      for (var i = 0; i < 5; i++) {
        switch(num){
          case 0 : 
          Str += "<div style='left:"+i*50+"px;top:"+(i<=2?i:4-i)*50+"px;'>"+i+"</div>";
          break;
          case 1 :
          Str += "<div style='left:"+(i<=2?i:4-i)*50+"px;top:"+i*50+"px;'>"+i+"</div>";
          break;
          case 2 :
          Str += "<div style='left:"+i*50+"px;top:"+(i<=2?4-i:i)*50+"px;'>"+i+"</div>";
          break;
          case 3 :
          Str += "<div style='left:"+(i<=2?4-i:i)*50+"px;top:"+i*50+"px;'>"+i+"</div>";
          break;
        }//switch
      };//for (var i = 0; i < 5; i++)
      num++;
      if(num == 3){
        num = 0;
      }
      Box.innerHTML = Str;
      Str = "";
     }//In.onclick
   }// window.onload
  </script>
</head>
<body>
  <input id="In" type="button" value="按钮">
  <div id="box">
    
  </div>
  
</body>
</html>